<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<div class="media border p-3">
			<img class="mr-3" src="https://www.starbucks.com.cn/images/pages/tmall-0215-cn.jpg" style="width:200px;">
			<div class="media-body">
				<h4>陈学辉</h4>
				<p>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字。。。</p>
			</div>
		</div>

		<hr>
		<!-- 
			对齐（给媒体添加）
				align-self-start	顶部对齐
				align-self-center	居中对齐
				align-self-end		底部对齐
		 -->
		<div class="media border p-3">
			<img class="mr-3 align-self-center" src="https://www.starbucks.com.cn/images/pages/tmall-0215-cn.jpg" style="width:200px;">
			<div class="media-body">
				<h4>陈学辉</h4>
				<p>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字。。。</p>
			</div>
		</div>

		<hr>
		<!-- 
			显示位置
		 -->
		<div class="media border p-3">
			
			<div class="media-body">
				<h4>陈学辉</h4>
				<p>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字。。。</p>
			</div>
			<img class="ml-3 align-self-start" src="https://www.starbucks.com.cn/images/pages/tmall-0215-cn.jpg" style="width:200px;">
		</div>

		<hr>
		<!-- 放到列表里 -->
		<ul class="list-unstyled">
			<li class="media">
				<img class="mr-3 align-self-start" src="https://www.starbucks.com.cn/images/pages/tmall-0215-cn.jpg" style="width:200px;">
				<div class="media-body">
					<h4>陈学辉</h4>
					<p>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字。。。</p>
				</div>
			</li>
			<li class="media my-4">
				<img class="mr-3 align-self-start" src="https://www.starbucks.com.cn/images/pages/tmall-0215-cn.jpg" style="width:200px;">
				<div class="media-body">
					<h4>陈学辉</h4>
					<p>这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字。。。</p>
				</div>
			</li>
		</ul>
	</body>
</html>
